@import 'wildcard/src/global-styles/breakpoints';

.streaming-search-results {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    height: min-content;
    padding-top: 0.5rem;

    @media (--md-breakpoint-down) {
        grid-template-columns: auto;
        grid-template-rows: auto auto 1fr;
    }

    &__sidebar {
        grid-column: 1;
        grid-row: 1 / span 2;

        @media (--md-breakpoint-down) {
            grid-column: 1;
            grid-row: 2;
            display: none;

            &--show {
                display: block;
            }
        }
    }

    &__infobar {
        grid-column: 2;
        grid-row: 1;
        padding-right: 1rem;
        padding-bottom: 0.25rem;

        @media (--md-breakpoint-down) {
            grid-column: 1;
            grid-row: 1;
            padding-left: 1rem;
        }
    }

    &__container {
        overflow-y: visible;
        overflow-x: hidden;
        grid-column: 2;
        grid-row: 2;

        @media (--md-breakpoint-down) {
            grid-column: 1;
            grid-row: 3;
            padding-left: 1rem;
        }
    }

    &__cta {
        &-icon-wrapper {
            // stylelint-disable-next-line declaration-property-unit-whitelist
            padding: calc(1rem - 1px);
            border-radius: var(--border-radius);
            border: 1px solid var(--border-color);
        }

        &-title {
            font-size: 1rem;
        }

        &-description {
            font-size: 0.875rem;
        }
    }
}
